<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';

import { onMounted, ref } from 'vue';

import {
  AnalysisChartCard,
  AnalysisChartsTabs,
  AnalysisOverview,
} from '@vben/common-ui';
import {
  SvgGoodsIcon,
  SvgOrderIcon,
  SvgShopIcon,
  SvgUserIcon,
} from '@vben/icons';

import {
  getGoodsCount,
  getOrderCount,
  getRefundCount,
  getUserCount,
} from '#/api/home';

import AnalyticsPayOrder from './analytics-pay-order.vue';
import AnalyticsPayTypeSource from './analytics-pay-type-source.vue';
import AnalyticsUserSource from './analytics-user-source.vue';

const overviewItems = ref<AnalysisOverviewItem[]>([
  {
    icon: SvgUserIcon,
    title: '用户量',
    totalTitle: '总用户量',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgShopIcon,
    title: '退单量',
    totalTitle: '总退单量',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgOrderIcon,
    title: '订单量',
    totalTitle: '总订单量',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgGoodsIcon,
    title: '商品量',
    totalTitle: '总商品量',
    totalValue: 0,
    value: 0,
  },
]);

const chartTabs: TabOption[] = [
  {
    label: '销售趋势',
    value: 'trends',
  },
];
// 查询用户总数和今日新增用户
const getCount = async () => {
  getUserCount({}).then((res) => {
    overviewItems.value[0].value = res.todayCount;
    overviewItems.value[0].totalValue = res.allCount;
  });
  // 查询退单总数和今日新增退单
  getRefundCount({}).then((res) => {
    overviewItems.value[1].value = res.todayCount;
    overviewItems.value[1].totalValue = res.allCount;
  });
  // 查询订单总数和今日新增订单

  getOrderCount({}).then((res) => {
    overviewItems.value[2].value = res.todayCount;
    overviewItems.value[2].totalValue = res.allCount;
  });
  // 查询商品总数和今日新增商品

  getGoodsCount({}).then((res) => {
    overviewItems.value[3].value = res.todayCount;
    overviewItems.value[3].totalValue = res.allCount;
  });
};

onMounted(() => {
  getCount();
});
</script>

<template>
  <div class="p-5">
    <AnalysisOverview :items="overviewItems" />
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #trends>
        <AnalyticsPayOrder />
      </template>
    </AnalysisChartsTabs>

    <div class="mt-5 w-full md:flex">
      <AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/2" title="支付来源">
        <AnalyticsPayTypeSource />
      </AnalysisChartCard>
      <AnalysisChartCard class="mt-5 md:mt-0 md:w-1/2" title="用户来源">
        <AnalyticsUserSource />
      </AnalysisChartCard>
    </div>
  </div>
</template>
